<template>
	
	<!-- 头部菜单 -->
	<view class="navibar">
		<i class="iconfont icon-fabugonglve
 mask" style="font-size: 42rpx;"></i>
		<u-tabs :list="list1" @change="changeTab" :current="0"></u-tabs>
		<i class="iconfont icon--fabu mask" style="font-size: 42rpx;"></i>
	</view>
	
	<!-- 列表内容 -->
	<view v-if="current == 0">
		<component-a></component-a>
	</view>
	<view v-if="current == 1">
		<component-b></component-b>
	</view>
	<view v-if="current == 2">
		<component-c></component-c>
	</view>
	
</template>

<script>
	import componentA from "@/pages/component/fabu/a.vue"
	import componentB from "@/pages/component/fabu/b.vue"
	import componentC from "@/pages/component/fabu/c.vue"
	
	export default {
		components:{
			componentA,
			componentB,
			componentC
		},
		data() {
			return {
				current: 0,
				list1: [{
						name: '动态',
				}, {
						name: '图片',
				}, {
						name: '视频',
				}]
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			changeTab(item) {
				console.log('item1', item);
				this.current=item.index;
				// console.log('item', this.current);
			}
		}
	}
</script>

<style lang="scss">
@import "@/static/iconfont/iconfont.css";

.mask{
	padding: 13rpx;
	background-color: #F6F6F6;
	border-radius: 50%
}

// 头部菜单
.navibar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5rpx 18rpx;
	border-bottom: 1rpx solid #eee;
	background-color: #fff;
}
</style>